<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:utext="${topic['title']}+' - 话题详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
    <div data-th-replace="layout/common-hade-two"></div>
</head>
<body>

<div data-th-replace="layout/classes/common-layout-classes"></div>

<div class="mt20 pb10">
    <div class="mb20 pt10 pb10">
        <div class="container">

            <ol class="breadcrumb">
                <li><a th:href="@{/web/classes/index}">首页</a></li>
                <li><a th:href="@{/web/classes/info?id={id}(id=${topic['classesId']})}">班级详情</a></li>
                <li class="active" th:text="${topic['title']}"></li>
            </ol>

            <div class="row">
                <div class="col-sm-9">
                    <p class="pt10"><span class="fs30" th:text="${topic['title']}"></span></p>
                    <section class="media">
                        <div class="media-left">
                            <a href="javascript:void(0)">
                                <img class="media-object img-circle lazy" th:attr="data-original= ${topic['createUser']['avatar']}"  width="20" height="20">
                            </a>
                        </div>

                        <div class="media-body">
                            <h4 class="media-heading"><span class="fs14 c-333" th:text="${topic['createUser']['nickname']}==null?${topic['createUser']['ralName']}:${topic['createUser']['nickname']}"></span></h4>
                            <span class="fs12 c-ccc" th:text="${#strings.concat('发布于 ', topic['updateTime'])}"></span>
                        </div>
                    </section>

                    <section class="mt20 pt10 mr10">
                        <div style="text-align: center" th:if="${topic['lookPermission']} == 2 and not ${login}">
                            <span class="c-danger fs24 mt10" style="align: center">话题<a th:href="@{/web/user/login}" class="c-info">登录</a>后才能浏览呢</span>
                        </div>
                        <div style="text-align: center" th:if="${topic['lookPermission']} == 3 and not ${joined}"><span class="c-danger fs24 mt10" style="align: center">你不是本班成员，不可以浏览该话题呢</span></div>
                        <div class="topic_content" th:if="(${topic['lookPermission']} == 1) or (${topic['lookPermission']} == 2 and ${login}) or (${topic['lookPermission']} == 3 and ${joined})" th:utext="${topic['content']}"></div>
                        <section th:if="${!#strings.isEmpty(topic['topicImages']) && #strings.listSplit(topic['topicImages'], ',').size() > 0}" class="question-content-img__wrap clearfix mt10">
                            <img th:each=" topicImage : ${#strings.listSplit(topic['topicImages'], ',')}" class="question-content-img-box" th:src="${topicImage}">
                        </section>
                        <hr>

                        <div>
                            <section class="clearfix mr20">
                                <aside class="pull-right">
                                    <a href="javascript:void(0);" id="topic-share" class="c-999 oShareBtn" th:attr="data-mobile=${mobilePath}+${mobilePathShare}"><i class="fa fa-share mr5"></i> 分享</a>
                                    <a href="javascript:void(0);" id="topic-report" class="c-999 ml20"><i class="fa fa-warning mr5"></i> 举报</a>
                                </aside>
                            </section>

                            <div class="pt10">
                                <section class="text-center" id="topic-thumbs-up">
                                    <button th:classappend="${liked} ? '' : 'hide'" class="btn btn-danger btn-rounded icon-love_fill" type="button"><i class="fa fa-thumbs-o-up"></i> 已点赞</button>
                                    <button th:classappend="${liked} ? 'hide' : ''" class="btn btn-danger btn-rounded icon-xihuan" type="button"><i class="fa fa-thumbs-o-up"></i> 赞一个吧</button>
                                </section>

                                <h5 class="hLh30 text-center mt20"><span class="c-999" id="likeNum" th:text="${#strings.concat(topic['likeNum'], '人点赞')}"></span></h5>
                                <section class="mt20 ml20 mr20">
                                    <ul class="clearfix wg-face-list text-center">
                                        <li th:if="not ${#lists.isEmpty(topicLikeList)}" th:each="like : ${topicLikeList}" th:id="'user-like-'+${like['userId']}">
                                            <img th:attr="data-original=${#strings.isEmpty(like['createUser']['avatar'])}?${like['createUser']['avatar']}:@{{path}/front/web/v3/img/default/userface.gif(path = ${staticPath})}" width="32" height="32" class="img-circle lazy vam">
                                        </li>
                                        <span th:if="${topic['likeNum']} > 10" th:text="${#strings.concat('等', topic['likeNum'], ' 人点过赞')}"></span>
                                    </ul>
                                </section>
                                <hr>
                            </div>

                            <div class="mt20 pt20 mb20">
                                <h3 class="unFw"><span class="fs20 c-info"><i class="fa fa-group mr5"></i> 评论列表</span></h3>
                                <div class="mt20 pb10" data-target="0">
                                    <section class="c-comment__wrap">
                                        <textarea th:disabled="${login} and (${topic['replyPermission']} == 2 and not ${joined})" data-context class="form-control" rows="2" maxlength="200" placeholder="在这里发表自己的评论"></textarea>
                                    </section>
                                    <section class="clearfix mt10">
                                        <aside class="pull-right">
                                            <span hidden class="mr10"><small class="fs12 c-danger"><i class="fa fa-exclamation-circle"></i> 评论内容不能为空！</small></span>
                                            <button th:disabled="${login} and ${topic['replyPermission']} == 2 and not ${joined}" id="replyBtn" data-reply="" class="btn btn-danger btn-outline" type="button">发表评论</button>
                                        </aside>
                                        <aside class="pull-left"><span class="fs12 c-999">最多可输入200个字</span></aside>
                                    </section>
                                </div>

                                <div class="mt20 pt10">
                                    <section class="c-head-title">
                                        <h6><span class="fs16 c-333">全部评论</span><span id="topic-reply-count" class="ml10 fs12 c-999" th:text="${#strings.concat('（', topic['replyNum'], '）')}"></span></h6>
                                        <hr>
                                    </section>
                                    <div id="classes-topic-reply"></div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

                <div class="col-sm-3">
                    <div class="mb20 ml10">
                        <section class="class-bCard__wrap">
                            <div class="class-bCard-face">
                                <img th:src="${classes['imageMap']['pcUrlMap']['small']}" width="100" height="100" class="lazy img-circle">
                            </div>
                            <h4 class="hLh30 txtOf text-center"><span class="c-333" th:text="${classes['name']}"></span></h4>
                            <section class="cm-desc-txt__twoLine text-center">
                                <span class="c-999 fs12" th:text="${classes['summary']}"></span>
                            </section>
                            <section class="mt10 text-center">
                                <button class="btn btn-danger btn-rounded btn-outline" type="button" th:disabled="not ${joined} or ${classes['status']} == 2" id="classes-topic-publish">发表话题</button>
                                <button th:if="${classes['status']} == 2" class="btn btn-default btn-rounded" type="button" disabled> 已停班</button>
                                <button th:if="${joined} and ${classes['status'] == 1}" class="btn btn-default btn-rounded" type="button" disabled>+ 已加入</button>
                                <button th:if="not ${joined} and ${classes['status'] == 1} and ${classes['full'] == 1} " class="btn btn-default btn-rounded" type="button" disabled>去加入其它</button>
                                <button th:if="not ${joined} and ${classes['status'] == 1} and ${classes['full'] == 2}" class="btn btn-danger btn-rounded" type="button" id="classes-join"> + 加入</button>
                            </section>
                            <hr>
                            <section class="pb10 text-center">
                                <span class="fs12 c-333"><b th:text="${classes['topicCount']}"></b>个话题</span>
                                <span class="fs12 c-333">·</span>
                                <span class="fs12 c-333"><b th:text="${classes['studentCount']}"></b>位同学</span>
                            </section>
                        </section>
                        <section class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">推荐话题</span></h6>
                                <hr>
                            </section>
                            <div class="mt20">
                                <section class="no-data__wrap" th:if="${#lists.isEmpty(recommendList)}">
                                    <span class="no-data-ico"></span>
                                    <p class="mt20"><span class="c-666">抱歉，还没有推荐话题，小编正在整理中~~~</span></p>
                                </section>
                                <section th:if="not ${#lists.isEmpty(recommendList)}" th:each="topic : ${recommendList}">
                                    <section class="hLh30 txtOf">
                                        <a th:href="@{/web/classes/topic/info?id={id}(id=${topic['id']})}" class="fs16 c-333" th:text="${topic['title']}"></a>
                                    </section>
                                    <section>
                                        <span class="mr10 c-ccc fs12" title="浏览量"><i class="fa fa-eye"></i> <span th:text="${topic['lookNum']}"></span></span>
                                        <span class="mr10 c-ccc fs12" title="评论数"><i class="fa fa-commenting"></i> <span th:text="${topic['replyNum']}"></span></span>
                                        <span class="c-ccc fs12" title="点赞数"><i class="fa fa-heart"></i> <span th:text="${topic['likeNum']}"></span></span>
                                    </section>
                                    <hr>
                                </section>
                            </div>
                        </section>
                        <section class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">APP下载</span></h6>
                                <hr>
                            </section>
                            <div class="mt10">
                                <section class="media">
                                    <section class="media-left">
                                        <img th:src="${appDowMap['url']}" width="92" height="92" alt="app扫码下载">
                                    </section>
                                    <section class="media-body">
                                        <h6><b class="fs3" th:text="${infoMap['author']}"><i class="fa fa-angle-right"></i></b></h6>
                                        <span class="fs12 c-ccc" th:text="${#strings.abbreviate(infoMap['description'],40)}" th:title="${infoMap['description']}"></span>
                                    </section>
                                </section>
                            </div>
                        </section>
                        <section class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">H5&微信</span></h6>
                                <hr>
                            </section>
                            <div class="mt10">
                                <section class="media">
                                    <section class="media-left">
                                        <img th:src="${h5MobileMap['url']}" width="92" height="92" alt="H5&微信">
                                    </section>
                                    <section class="media-body">
                                        <h6><b class="fs3" th:text="${infoMap['author']}"><i class="fa fa-angle-right"></i></b></h6>
                                        <span class="fs12 c-ccc" th:text="${#strings.abbreviate(infoMap['description'],40)}" th:title="${infoMap['description']}"></span>
                                    </section>
                                </section>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--话题 举报 模态内容-->
<div id="topicReportEle" hidden>
    <div class="form-group clearfix">
        <div class="radio">
            <label class="mr20"><input checked type="radio" value="2" name="reportType">广告及垃圾信息</label>
            <label class="mr20"><input type="radio" value="3" name="reportType">抄袭或未授权转载</label>
            <label><input type="radio" value="1" name="reportType">其它</label>
        </div>
    </div>
    <div class="form-group clearfix">
        <div id="report-context" contenteditable="true" placeholder="写下举报的详细情况" class="form-control unRadius" style="height: 60px;overflow-y: auto;"></div>
    </div>
</div>
<input hidden id="id" th:value="${topic['id']}">
<input hidden id="classesId" th:value="${classes['id']}">
<input hidden id="courseId" th:value="${classes['courseId']}">
<input hidden id="requestURL" th:value="${requestURL}">

<div data-th-replace="layout/footer"></div>
<script type="text/javascript" th:src="@{{path}/front/web/common/login-util.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/classes/classes.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/classes/join-classes.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/classes/topic/topic-info.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/classes/topic/reply/topic-reply.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/common/shareFn.js?v={v}(path=${staticPath}, v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/common/qrcode/qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
</body>
</html>
